import React, { PureComponent, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { connect } from 'dva';
import { Button, Icon, Card, Row, Col, Divider, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import G6 from '@antv/g6';
import DrawTable from './Draw/DrawTable';
import DrawTable2 from './Draw/DrawTable2';
@connect(({ draw, loading }) => ({
  draw,
  loading: loading.models.draw,
}))

class Draw extends PureComponent {
  state = {
    mysql: true,
    oracle: false,
  }
  pageList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'draw/queryDraw',
      callback: res => {
        this.renderTrackChark(res);
      },
    });

  }
  componentDidMount() {
    this.pageList();
  }
  renderTrackChark() {
    const width = document.getElementById('container').scrollWidth;
    const height = 800;
    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const data = item.get('model').data;
              data.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 10,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
        style: {
          fill: '#C6E5FF',
          stroke: '#5B8FF9',
        },
      },
      defaultEdge: {
        type: 'cubic-horizontal',
        style: {
          stroke: '#A3B1BF',
        },
      },
      layout: {
        type: 'compactBox',
        direction: 'LR',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 16;
        },
        getHGap: function getHGap() {
          return 60;
        },
      },
    });

    graph.node(function (node) {
      return {
        label: node.label,
        labelCfg: {
          offset: 10,
          position: node.children && node.children.length > 0 ? 'left' : 'right',
        },
      };
    });

    graph.data(this.props.draw.treeData);
    graph.render();
    graph.fitView();
    graph.paint();
    graph.on('node:click', evt => {
      console.log(evt);
      if (evt.item._cfg.model.id === "01-1-1") {
        this.setState(
          {
            mysql: true,
            oracle:false
         })
      } else if (evt.item._cfg.model.id === "11-1-2") {
        this.setState(
          { oracle:true,
            mysql:false
          }
          )
      }

    });
  }
  render() {
    const { mysql, oracle } = this.state;
    return (
      <PageHeaderWrapper title="图表展示">
        <Card bordered={false}>
          <Row gutter={16}>
            <Col md={14} sm={24} id="container" style={{ borderRight: '1px solid #eee' }}>
            </Col>
            <Col md={10}>
              <div style={{ display: mysql == true ? '' : 'none' }}>
                <DrawTable>
                </DrawTable>
              </div>
              <div style={{ display: oracle == true ? '' : 'none' }}>
                <DrawTable2>
                </DrawTable2>
              </div>
            </Col>
          </Row>
        </Card >
      </PageHeaderWrapper >
    )
  }
}

export default Draw;

